<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画人像猜犯人游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 20px;
        }

        #canvas {
            border: 1px solid black;
            cursor: crosshair;
        }

        #guessForm {
            margin-top: 20px;
        }

        #guessInput {
            padding: 5px;
            width: 200px;
        }

        #guessButton {
            padding: 5px 10px;
        }

        #result {
            margin-top: 20px;
            color: green;
        }

        #hint {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>画人像猜犯人游戏</h1>
    <p>根据提示在画布上画人像，然后猜测犯人特征。</p>
    <canvas id="canvas" width="400" height="400"></canvas>
    <div id="hint">
        <?php
        session_start();
        if (!isset($_SESSION['criminal'])) {
            // 初始化犯人特征，这里简单用数组表示
            $criminals = [
                ["hair" => "长发", "eyes" => "蓝色", "face" => "圆脸"],
                ["hair" => "短发", "eyes" => "棕色", "face" => "方脸"],
                ["hair" => "卷发", "eyes" => "黑色", "face" => "瓜子脸"]
            ];
            $_SESSION['criminal'] = $criminals[array_rand($criminals)];
            $_SESSION['attempts'] = 0;
        }
        echo "提示：犯人头发是 " . $_SESSION['criminal']['hair'] . "。";
        ?>
    </div>
    <form id="guessForm">
        <label for="guessInput">猜测犯人的眼睛颜色和脸型（格式：颜色 脸型）：</label>
        <input type="text" id="guessInput" required>
        <button type="button" id="guessButton">提交猜测</button>
    </form>
    <div id="result"></div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        });

        canvas.addEventListener('mousemove', (e) => {
            if (isDrawing) {
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
                [lastX, lastY] = [e.offsetX, e.offsetY];
            }
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
        });

        canvas.addEventListener('mouseout', () => {
            isDrawing = false;
        });

        const guessButton = document.getElementById('guessButton');
        const guessInput = document.getElementById('guessInput');
        const resultDiv = document.getElementById('result');

        guessButton.addEventListener('click', async () => {
            const guess = guessInput.value;
            const response = await fetch('check_guess.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `guess=${encodeURIComponent(guess)}`
            });
            const data = await response.json();
            resultDiv.textContent = data.message;
            if (data.correct) {
                guessInput.value = '';
            }
        });
    </script>
</body>

</html>